Hexo + Github个人博客搭建

发表于 | 分类于 | 评论数： | 阅读次数：

Hexo简介与环境配置

  1. Hexo 是一个基于Node.js的静态博客框架：Github pages存放静态文件，博客不仅包含文章内容，还有文章列表、分类、标签、翻页等动态内容，为了避免每次手动更新博文目录和相关链接信息，Hexo将这些md文件都放在本地，然后调用写好的命令来批量完成相关页面的生成，再将有改动的页面提交到Github
  2. 安装Hexo之前必须先搭建Git & Node.js环境
    Git：https://git-scm.com/download/
    Node.js: https://nodejs.org/en/download/

  3. Hexo安装：新建文件夹，比如E:\Hexo\blog，并在此文件夹下右键打开git bash命令行界面： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    安装Hexo：         npm install -g hexo
    初始化：           hexo init         hexo会自动下载文件到Hexo/blog文件
    Hexo目录结构：   
    |-- _config.yml   站点配置文件，包括网站名称，副标题，描述，作者，语言，主题，部署等等参数
    |-- package.json  hexo框架的参数和所依赖插件
    |-- scaffolds   "骨架"， hexo是根据这个目录下的文件进行构建
    |-- source   新建文章应保存在此文件夹下
           |-- _posts  
    |-- themes    站点主题目录
    |-- .gitignore  
    |-- package.json

  4. 默认主题与更换，初始化Hexo后，分别输入以下指令：

    1
    2
    3
    hexo g    生成public文件夹生成相关html文件
    hexo s    开启本地预览服务，浏览器访问 http://localhost:4000 ，如果打不开，可能4000端口被占用
    git clone https://github.com/iissnan/hexo-theme-next themes/next    更换Next主题

Hexo配置

站点配置

1
2
3
4
5
6
7
8
9
10
11
12
13
站点配置文件：Hexo\blog\_config.yml
# Site
title: Litsao           #网站标题
subtitle:               #网站副标题
description:            #网站描述
author:                 #您的名字
language: zh-CN         #网站使用的语言
timezone:               #网站时区，Hexo 默认使用您电脑的时区。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next             #站点主题更改为next

主题样式

1
2
3
4
5
主题配置文件themes\next\_config.yml，三种样式可选
# Schemes   
#scheme: Mist
scheme: Pisces
#scheme: Gemini

菜单栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  home: / || home                       #首页，||后表示对应图标
  categories: /categories/ || th        #分类
  tags: /tags/ || tags                  #标签
  archives: /archives/ || archive       #归档
  #about: /about/ || user               #关于
  #schedule: /schedule/ || calendar     #日程表
  #sitemap: /sitemap.xml || sitemap     #站点地图
  #commonweal: /404/ || heartbeat       #公益404
  home，achieves可以自动生成菜单标签项，若新增菜单项后无法打开，需要在source文件夹
  下手动新建菜单项与index.md文件
  ---
  title: 标签
  date: 2016-05-04 17:03:15
  type: "tags"
  ---

头像

1
2
3
4
5
主题配置文件themes\next\_config.yml，两种方法，直接avatar输入头像地址（使用图床）；
或者将头像.jpg放入source\images文件夹下，avatar改为头像路径名
# Sidebar Avatar
avatar: http://ww1.sinaimg.cn/large/b5fdace3gy1fhdfetrwxyj20ey0hgmzf.jpg
#avatar: /images/头像.jpg

社交与友情链接

1
2
3
4
5
6
7
8
9
10
11
12
# Social links
social:
  GitHub: https://github.com/your-user-name
  Weibo: https://weibo.com/your-user-name
  #等等
# Blog rolls
links_icon: link
links_title: Link
links_layout: block
#links_layout: inline
links:     
  Title: http://example.com

RSS

1
npm install hexo-generator-feed --save        #安装插件

本地搜索

1
2
3
4
5
6
7
8
npm install hexo-generator-searchdb --save   #安装本地搜索插件 hexo-generator-search
# Search                                     #站点配置文件添加搜索功能              
search:
  path: ./public/search.xml                  #索引文件相对于根目录的路径
  field: post                                #搜索范围
# Local search                               #主题配置文件开启本地搜索
local_search:
  enable: true

博客创建/更新时间

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true       #显示标题下信息所属条目，例如发表于XX，分类于XX..
  created_at: true      #是否显示创建时间
  updated_at:           #是否显示更新时间
    enable: false

访客数量

1
2
3
4
5
6
7
8
busuanzi_count:                #Next主题集成了不蒜子统计功能
  enable: true                 #开启
  total_visitors: false        #页面底部显示站点的UV值
  total_visitors_icon: user    
  total_views: false           #页面底部显示站点的PV值
  total_views_icon: eye
  post_views: true             #文章页面的标题下显示该页面的PV值（阅读数）  
  post_views_icon: eye

Blog页面宽度

1
2
3
4
5
对于 Pisces Scheme，需要同时修改 header的宽度、.main-inner的宽度以及.content-wrap  
的宽度（Pisces 的布局定义在 source/css/_schemes/Picses/_layout.styl 中）：
header{ width: 90%; }
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px)}

浏览进度

1
2
# Scroll percent label in b2t button. 右下角显示文章进度条
  scrollpercent: true

设置阅读全文

1
文章中使用<!-- more --> 手动截断

打赏功能

1
2
3
4
5
6
7
reward_settings:
  enable: true                          #开启打赏功能
  animation: false
  comment: 谢谢老板~                     #感谢打赏
reward:
  wechatpay: /images/wechatpay.png      #blog\source\images放入图片.png
  alipay: /images/alipay.png

评论

  • 使用Valine评论，系统放在leancloud，首先注册leancloud账号并申请一个应用，在应用设置里的安全中心设置好安全域名
  • 主题配置文件搜索valine，开启评论功能，并填入appid与appkey
    1
    2
    3
    4
    5
    # Valine   
    valine:
      enable: true          #开启valine
      appid: XXX            # leancloud appid
      appkey: XXX           # leancloud appkey

页脚设置

1
2
3
4
5
6
7
8
9
10
footer:                            #站点建立时间
  since: 2016
powered:
  # Hexo link (Powered by Hexo).   #取消页脚Hexo与主题版本信息
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: false
theme:
  enable: false
  version: false

绑定Github

  • 新建一个名为用户名.github.io仓库，如果你的github用户名是test，那么就新建test.github.io的仓库（必须是你的用户名，其它名称无效）
  • 不绑定域名也可以直接访问用户名.github.io,为了更个性一点，我们可以绑定域名。首先可以去阿里云注册个域名，
0%